<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
    cancelText="关闭">
    <!--table区 -->
    <div class="marginCss">
      <a-table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :scroll="{ y: 700 }"
        :pagination="false">
        <span slot="dataVersionTitle1"> 时间:{{dataVersion1Num}}</span>
        <span slot="dataVersionTitle2"> {{dataVersion2Num}}</span>
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <img :src="getAvatarView(record)"/>
          </div>

        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
  import {getAction} from '@/api/manage'
  import moment from 'moment'

  export default {
    name: 'DataLogCompareBusModal',
    data() {
      return {
        modalWidth: 1000,
        modaltoggleFlag: true,
        confirmDirty: false,
        title: '操作',
        visible: false,
        model: {},
        confirmLoading: false,
        headers: {},
        //版本号
        dataVersion1Num:'',
        dataVersion2Num:'',
        //表头
        columns: [
          {
            title: '字段名',
            align: 'left',
            dataIndex: 'code',
            width: '30%',
          }, {
            align: 'left',
            dataIndex: 'dataVersion1',
            width: '30%',
            slots: { title: 'dataVersionTitle1' },
          }, {
            title: '',
            dataIndex: 'imgshow',
            align: 'center',
            scopedSlots: {customRender: "avatarslot"},
            width: '10%',
          }, {
            align: 'left',
            dataIndex: 'dataVersion2',
            width: '30%',
            slots: { title: 'dataVersionTitle2' },
          }
        ],
        //数据集
        dataSource: [],
        loading: false,
        url: {
          queryCompareUrl: "/sys/dataLog/queryCompareList",
        },
      }
    },
    created() {

    },
    methods: {
      loadData(curRecord, hisRecord, tableInfo) {
        this.dataSource = [];
        let that = this;
        that.dataVersion1Num = hisRecord.createTime;
        that.dataVersion2Num = '当前';
        let json1 = JSON.parse(hisRecord.dataContent);
        let json2 = curRecord;
        for (var item1 in json1) {
          if(item1=='createBy'||item1=='createTime'||item1=='updateBy'||item1=='updateTime')
            continue
          if(this.confirmEnding(item1,'List'))
            continue
          for (var item2 in json2) {
            if (item1 == item2) {
              let val1 = json1[item1]
              let val2 = json2[item2]
              let fieldName = item1
              tableInfo.forEach(rowData =>{
                if(item1 == rowData.Field){
                  fieldName = rowData.Comment
                  if(rowData.Type == 'date'){
                    val1 = moment(val1).format("YYYY-MM-DD")
                  }else if(rowData.Type == 'datetime'){
                    val1 = moment(val1).format("YYYY-MM-DD HH:mm:ss")
                  }
                  return
                }
              })
              if(val1!=val2){
                this.dataSource.push({
                  code: fieldName,
                  imgshow: '',
                  dataVersion1: val1,
                  dataVersion2: val2,
                })
              }
            }
          }
        }
      },
      confirmEnding(str, target) {
        // 请把你的代码写在这里
        var start = str.length-target.length;
        var arr = str.substr(start,target.length);
        if(arr == target){
             return true;
           }
        return false;
      },
      compareModal(curRecord, hisRecord, tableInfo) {
        this.visible = true
        this.loadData(curRecord, hisRecord, tableInfo);
      },
      handleCancel() {
        this.close()
      },
      modalFormOk() {
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      setdataCss(record) {
        let className = 'trcolor';
        const dataVersion1 = record.dataVersion1;
        const dataVersion2 = record.dataVersion2;
        if (dataVersion1 != dataVersion2) {
          return className;
        }
      },
      getAvatarView: function (avatar) {
        if (avatar.dataVersion1 != avatar.dataVersion2) {
          return "/goright.png";
        } else {
          return "";
        }
      },
    }
  }
</script>

<style scoped>
  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

  .marginCss {
    margin-top: 20px;
  }

  @import '../../../assets/less/index.less';
</style>